<template>
	<view>
		<!-- 头部提示 -->
		<navbar :backshow="true" :title="title" :navBarHeight="navBarHeight" :menuRight="menuRight" :menuTop="menuTop"
			:menuHeight="menuHeight"></navbar>
		<!-- 头部展位 -->
		<view class="main" :style="{ height: mainheight + 'px' }"></view>

		<view class="bookxqbox">
			<view class="bookitem">
				<view class="bookitemlabname">时间：</view>
				<view class="bookitemlab">
					{{ formatTimeRange(yxroom.startTime, yxroom.endTime) }}
				</view>
			</view>
			<view class="bookitems">
				<view class="roomnamebox">
					<view class="bookitemlabname">房间：</view>
					<view class="bookitemlab">
						{{ yxroom.roomName }}
					</view>
				</view>
				<view class="roomimages">
					<image :src="roomPhoto" mode="" class=""></image>
				</view>
			</view>
			<view class="bookitem">
				<view class="bookitemlabname">主题：</view>
				<view class="bookitemlab">
					{{ yxroom.appointmentTheme }}
				</view>
			</view>
			<view class="bookitem">
				<view class="bookitemlabname">预约人：</view>
				<view class="bookitemlab">
					{{ yxroom.createUser }}
				</view>
			</view>
			<view class="bookitem">
				<view class="bookitemlabname">班级：</view>
				<view class="bookitemlab">
					{{ yxroom.organizationName }}
				</view>
			</view>
			<view class="bookitem" v-if="yxroom.auditStatus !='9'">
				<view class="bookitemlabnamess"
					:class="yxroom.auditStatus == '1' ? 'bookitemlabnamessblue':'bookitemlabnamessred'">
					{{ yxroom.auditStatus == '1' ? '审批通过:':''}}
					{{ yxroom.auditStatus == '2' ? '审批不通过:':''}}
				</view>
				<view class="bookitemlab"
					:class="yxroom.auditStatus == '1' ? 'bookitemlabnamessblue':'bookitemlabnamessred'">
					{{ yxroom.auditTime}}
				</view>
			</view>
			<view class="bookitem" v-if="yxroom.auditStatus==2">
				<view class="bookitemlabnamess"
					:class="yxroom.auditStatus == '1' ? 'bookitemlabnamessblue':'bookitemlabnamessred'">
					理由：
				</view>
				<view class="bookitemlab bookitemlabnamessreds"
					:class="yxroom.auditStatus == '1' ? 'bookitemlabnamessblue':'bookitemlabnamessred'">
					{{ yxroom.auditRemark}}
				</view>
			</view>
			<!-- <view class="tjcgboxs">
				<image src="../../static/jxz.png" mode="" class="tjcgboximg" v-if="getStatus(yxroom.endTime)=='正在进行'">
					<image src="../../static/tjer.png" mode="" class="tjcgboximg"
						v-if="getStatus(yxroom.endTime)=='已经结束'">
					</image>
					<view class="tjcjms">{{ getStatus(yxroom.endTime) }}</view>
					<view class="tjcjmst">{{ getStatuss(yxroom.endTime) }}</view>
			</view> -->
			<view class="tjcgboxs">
				<image src="../../static/jxz.png" mode="" class="tjcgboximg"
					v-if="getStatus(yxroom.startTime,yxroom.endTime,yxroom.auditStatus)=='正在进行'">
					<image src="../../static/tjer.png" mode="" class="tjcgboximg"
						v-if="getStatus(yxroom.startTime,yxroom.endTime,yxroom.auditStatus)!='正在进行'">
					</image>
					<view class="tjcjms">{{ getStatus(yxroom.startTime,yxroom.endTime,yxroom.auditStatus) }}</view>
					<view class="tjcjmst">{{ getStatuss(yxroom.endTime,yxroom.auditStatus) }}</view>
			</view>
			<!-- <view class="zwdboxs"></view> -->
			<view class="tjyl" @click="sava" v-if="yxroom.evaluateStatus==1">验收结果</view>
			<!-- <view class="savabox" @click="backs">好的，返回主页</view> -->
			<view class="zwdboxs"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				roomPhoto: '',
				tabshow: false,
				title: "预约记录",
				navBarHeight: 50, // 导航栏高度
				menuRight: 10, // 胶囊距右方间距（方保持左、右间距一致）
				menuTop: 50, // 胶囊距底部间距（保持底部间距一致）
				menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
				mainheight: 60,
				yxroom: {
					startTime: "",
					endTime: "",
				},
			}
		},
		onLoad() {
			const that = this;
			// 获取系统信息
			const systemInfo = wx.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// 导航栏高度 = 状态栏高度 + 44
			that.navBarHeight = systemInfo.statusBarHeight + 44;
			that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
			that.menuTop = menuButtonInfo.top;
			that.menuHeight = menuButtonInfo.height;
			that.mainheight = menuButtonInfo.top + menuButtonInfo.height;
		},
		onReady() {


			uni.getStorage({
				key: "yxroom",
				success: (res) => {
					console.log("获取的数据：", res.data);
					// 可以在这里处理获取到的数据
					this.yxroom = res.data;
					// this.getuser();
					// 查询房间图片
					this.$myRequest({
						url: "/admin/room/list",
						method: "GET",
						data: {
							pageNum: 1,
							pageSize: 1,
							roomName: this.yxroom.roomName,
						},
					}).then((res) => {
						this.roomPhoto = JSON.parse(res.data.list[0].roomPhoto)[0];
						console.log("房间回显", res.data.list, this.roomPhoto);
					});
					this.$myRequest({
						url: "/client/appointment/getRoomAppointmentInfo",
						method: "GET",
						data: {
							appointmentId: this.yxroom.appointmentId,
						},
					}).then((res) => {
						this.yxroom.auditTime = res.data.auditTime
						// this.roomPhoto = JSON.parse(res.data.list[0].roomPhoto)[0];
						// console.log("房间回显", res.data.list, this.roomPhoto);
					});


				},
				fail: function() {
					console.error("获取数据失败");
				},
			});
			// 
			// this.$refs.customForm.setRules(this.customRules);
		},
		onLoad() {

		},
		methods: {
			sava() {
				uni.navigateTo({
					url: "/pages/roombookys/roombookys", // 要跳转的非 tabBar 页面路径，可以带参数
				});
			},
			getStatus(startTime, endTime, auditStatus) {
				if (!startTime || !endTime) {
					return "未提供开始时间或结束时间";
				}

				// 获取当前时间
				const now = new Date();

				// 替换空格为T，并转换为ISO 8601格式
				const formattedStartTime = startTime.replace(' ', 'T');
				const formattedEndTime = endTime.replace(' ', 'T');

				// 创建开始时间和结束时间的 Date 对象
				const startDateTime = new Date(formattedStartTime);
				const endDateTime = new Date(formattedEndTime);

				// 根据当前时间和审核状态返回相应状态
				if (auditStatus == 1) {
					if (now < startDateTime) {
						return "还未开始";
					} else if (now >= startDateTime && now < endDateTime) {
						if (auditStatus == 1) {
							return "正在进行";
						} else if (auditStatus == 2) {
							return "未通过审核";
						} else {
							return "审核中";
						}
					} else {
						return "已经结束";
					}
				} else {
					if (auditStatus === 2) {
						return "未通过审核";
					}
					if (auditStatus === 9) {
						return "审核中";
					}
				}

				// if (now < startDateTime) {
				// 	return "还未开始";
				// } else if (now >= startDateTime && now < endDateTime) {
				// 	if (auditStatus == 1) {
				// 		return "正在进行";
				// 	} else if (auditStatus == 2) {
				// 		return "未通过审核";
				// 	} else {
				// 		return "审核中";
				// 	}
				// } else {
				// 	return "已经结束";
				// }
			},
			getStatuss(endTime, auditStatus) {
				// 获取当前时间
				const now = new Date();

				const formattedEndTime = endTime.replace(' ', 'T'); // 将空格替换为T，转换为ISO 8601格式
				const endDateTime = new Date(formattedEndTime);
				console.log("三四十", now, endDateTime);
				// 比较当前时间与结束时间
				if (auditStatus == 1) {
					if (now < endDateTime) {
						return "预约的内容将于" + endTime + "结束";
					} else {
						return "预约的内容已于" + endTime + "结束";
					}
				}

			},

			formatTimeRange(startTime, endTime) {
				if (startTime === "" || endTime === "") {
					return "数据错误";
				}

				// 将字符串转换为 Date 对象
				const startDate = new Date(startTime.replace(/-/g, '/')); // 替换所有的'-'号
				const endDate = new Date(endTime.replace(/-/g, '/'));

				// 格式化日期部分
				const startDateString = this.formatDate(startDate); // 格式化开始日期部分

				// 格式化时间部分
				const startTimeString = this.formatTime(startDate); // 格式化开始时间部分
				const endTimeString = this.formatTime(endDate); // 格式化结束时间部分

				// 格式化成所需的字符串
				const formattedTimeRange = `${startDateString} ${startTimeString}~${endTimeString}`;

				return formattedTimeRange;
			},

			// 辅助函数，格式化日期部分
			formatDate(date) {
				const year = date.getFullYear();
				const month = this.padZero(date.getMonth() + 1); // 月份从0开始，需要加1
				const day = this.padZero(date.getDate());

				// 返回格式化后的日期部分字符串
				return `${year}-${month}-${day}`;
			},

			// 辅助函数，格式化时间部分
			formatTime(date) {
				const hours = this.padZero(date.getHours());
				const minutes = this.padZero(date.getMinutes());

				// 返回格式化后的时间部分字符串
				return `${hours}:${minutes}`;
			},

			// 辅助函数，补零函数，用于确保日期时间部分是两位数
			padZero(num) {
				return num.toString().padStart(2, '0');
			},
		}
	}
</script>

<style>

</style>